<template>
  <div class="home">
    <van-search
            v-model="searchValue"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
            @search="search"
            @click="$router.push('/search')"
    />


    <movie-x-table :movies="hotShowMovie" :btn-color="'red'">
      <span slot="title">正在热映</span>
      <span slot="num">全部{{hotShowMovie.total}}部</span>
    </movie-x-table>

    <movie-x-table :movies="comingMovieMovie" :btn-color="'blue'">
      <span slot="title">待映推荐</span>
      <span slot="num">全部{{comingMovieMovie.total}}部</span>
    </movie-x-table>

    <router-link to="/cinemaDetail">
    <button>按钮1</button>
    </router-link>

    <router-link to="/cineamsList">
      <button>按钮2</button>
    </router-link>

    <div style="height: 100px"></div>
    <tab-bar></tab-bar>

  </div>
</template>

<script>
  import homeApi from "../../api/home";
  import TabBar from "../../components/common/TabBar";
  import MovieXTable from "../../components/home/MovieXTable";
  import { Toast } from 'vant';
  export default {
  name: 'Home',
  data(){
    return{
      searchValue:"",
      comingMovieMovie:{  //即将上映电影
        total:0,
        data:[]
      },
      hotShowMovie:{      //热映电影
        total:0,
        data:[]
      },
      hotMovie:[]         //热播电影
    }
  },
  components:{
    TabBar,
    MovieXTable
  },
  created() {
    this.initData()
  },
  methods:{
    search(){    //搜索电影
      console.log("触发成功");
    },
    initData(){  //初始化数据
      homeApi.mainData().then(response=>{
        console.log(response)
        console.log(this.hotShowMovie);
        this.comingMovieMovie=response.data.comingMovieMovie
        this.hotShowMovie=response.data.hotShowMovie
        this.hotMovie=response.data.hotMovie
      }).catch(err=>{
        Toast.fail(err.toString())
      })
    }
  }

}
</script>

<style scoped="scoped">



</style>